<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" style="margin-bottom: 10px;">
        <el-card>
          <div slot="header" class="clearfix">
            <span>参数集信息</span>
          </div>
          <el-descriptions size="medium" :column="4">
            <el-descriptions-item label="参数集名称">{{params.paramsName}}</el-descriptions-item>
            <el-descriptions-item label="参数集编码">{{params.paramsCode}}</el-descriptions-item>
            <el-descriptions-item label="参数类型">{{ dict.label.params_type[params.paramsType] }}</el-descriptions-item>
            <el-descriptions-item label="是否禁用">
              <el-tag type="success" size="small" v-if="params.isDisable == '0'">{{ dict.label.is_disable[params.isDisable] }}</el-tag>
              <el-tag type="info" size="small" v-if="params.isDisable == '1'">{{ dict.label.is_disable[params.isDisable] }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="应用产品"> {{params.productCode}} </el-descriptions-item>
            <el-descriptions-item label="版本"><span class="badge-content">{{params.version}}</span></el-descriptions-item>
            <el-descriptions-item label="创建人"> {{params.createBy}} </el-descriptions-item>
            <el-descriptions-item label="创建时间"> {{params.createTime}} </el-descriptions-item>
            <el-descriptions-item label="更新人"> {{params.updateBy}} </el-descriptions-item>
            <el-descriptions-item label="更新时间"> {{params.updateTime}} </el-descriptions-item>
            <el-descriptions-item label="描述"> {{params.remark}} </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>参数列表</span>
            <div style="float: right; height: 25px;"></div>
          </div>
          <div class="head-container">
            <div v-if="crud.props.searchToggle">
              <!-- 搜索 -->
              <el-select v-model="query.operationCode" clearable filterable
                         placeholder="工序编码" style="width: 185px;" class="filter-item" @change="crud.toQuery" >
                <el-option
                  v-for="item in operations"
                  :key="item.id"
                  :label="item.operationName"
                  :value="item.operationCode" >
                  <span style="float: left">{{ item.operationName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.operationCode }}</span>
                </el-option>
              </el-select>
              <el-input v-model="query.paramCode" clearable placeholder="参数编码" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
              <el-input v-model="query.paramName" clearable placeholder="参数名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
              <el-select v-model="query.isNecessary" clearable filterable
                         placeholder="是否必传" style="width: 100px;" class="filter-item" @change="crud.toQuery" >
                <el-option
                  v-for="item in dict.whether"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
              <el-select v-model="query.isCheck" clearable filterable
                         placeholder="二次校验" style="width: 100px;" class="filter-item" @change="crud.toQuery" >
                <el-option
                  v-for="item in dict.whether"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
              <rrOperation :crud="crud" />
            </div>
            <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
            <crudOperation :permission="permission" />
            <!--表单组件-->
            <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px">
              <el-form :inline="true" ref="form" :model="form" :rules="rules" size="small" label-width="100px">
                <el-form-item label="工序编码" prop="operationCode">
                  <el-select v-model="form.operationCode" style="width: 415px" filterable placeholder="请选择">
                    <el-option
                      v-for="item in operations"
                      :key="item.id"
                      :label="item.operationName"
                      :value="item.operationCode" >
                      <span style="float: left">{{ item.operationName }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.operationCode }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="参数编码" prop="paramCode">
                  <el-input v-model="form.paramCode" style="width: 415px;" placeholder="参数编码"/>
                </el-form-item>
                <el-form-item label="参数名称" prop="paramName">
                  <el-input v-model="form.paramName" style="width:415px;" placeholder="参数名称"/>
                </el-form-item>

                <el-form-item label="下限" prop="paramUpper">
                  <el-input-number size="small" v-model="form.paramLower" placeholder="下限" style="width: 150px"></el-input-number>
                </el-form-item>

                <el-form-item label="上限" prop="paramUpper">
                  <el-input-number size="small" v-model="form.paramUpper" placeholder="上限" style="width: 150px;"></el-input-number>
                </el-form-item>

                <el-form-item label="标准值" prop="standard">
                  <el-input size="small" v-model="form.standard" placeholder="标准值" style="width: 150px;"></el-input>
                </el-form-item>

                <el-form-item label="单位" prop="paramUnit">
                  <el-input v-model="form.paramUnit" style="width: 150px;" placeholder="参数单位" />
                </el-form-item>

                <el-form-item label="是否必传" prop="isNecessary">
                  <el-tooltip :content="dict.label.whether[form.isNecessary]" placement="top">
                    <el-switch
                      v-model="form.isNecessary"
                      active-value="1"
                      inactive-value="0"
                      active-color="#409eff"
                      inactive-color="#dcdfe6">
                    </el-switch>
                  </el-tooltip>
                </el-form-item>

                <el-form-item label="二次校验" prop="isCheck" style="margin-left: 120px">
                  <el-tooltip :content="dict.label.whether[form.isCheck]" placement="top">
                    <el-switch
                      v-model="form.isCheck"
                      active-value="1"
                      inactive-value="0"
                      active-color="#409eff"
                      inactive-color="#dcdfe6">
                    </el-switch>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="描述">
                  <el-input v-model="form.remark" :rows="3" type="textarea" style="width: 415px;" />
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="crud.cancelCU">取消</el-button>
                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
              </div>
            </el-dialog>
            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="paramsId" label="参数集ID" width="80px;" align="center"/>
              <el-table-column prop="paramCode" label="参数编码" width="150px;" align="center"/>
              <el-table-column prop="paramName" label="参数名称" width="200px;" align="center"/>
              <el-table-column prop="operationCode" label="工序编码" width="100px;" align="center"/>
              <el-table-column label="工序名称" width="200px;" align="center">
                <template slot-scope="scope">
                  {{ getOperationName(scope.row.operationCode) }}
                </template>
              </el-table-column>
              <el-table-column prop="paramLower" label="参数下限" width="100px;" align="center"/>
              <el-table-column prop="paramUpper" label="参数上限" width="100px;" align="center"/>
              <el-table-column prop="paramUnit" label="参数单位" width="100px;" align="center"/>
              <el-table-column prop="standard" label="标准值" width="100px;" align="center"/>
              <el-table-column prop="isNecessary" label="是否必传" width="100px;" align="center">
                <template slot-scope="scope">
                  {{ dict.label.whether[scope.row.isNecessary] }}
                </template>
              </el-table-column>
              <el-table-column prop="isCheck" label="二次校验" width="100px;" align="center">
                <template slot-scope="scope">
                  {{ dict.label.whether[scope.row.isCheck] }}
                </template>
              </el-table-column>
              <el-table-column prop="createBy" label="创建人" width="100px;" align="center"/>
              <el-table-column prop="createTime" label="创建时间" width="180px;" align="center"/>
              <el-table-column prop="updateBy" label="更新人" width="100px;" align="center"/>
              <el-table-column prop="updateTime" label="更新时间" width="180px;" align="center"/>
              <el-table-column prop="remark" label="描述" width="250px;" align="center"/>
              <el-table-column v-if="checkPer(['admin','craftParamDetail:edit','craftParamDetail:del'])" fixed="right" label="操作" width="150px" align="center">
                <template slot-scope="scope">
                  <udOperation
                    :data="scope.row"
                    :permission="permission"
                  />
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--工具栏-->
  </div>
</template>

<script>
import crudCraftParamDetail from '@/api/craft/craftParamDetail'
import crudCraftOperationProduct from '@/api/craft/craftOperationProduct'
import crudCraftParam from '@/api/craft/craftParam'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, paramsId: null, operationCode: null, paramCode: null, paramName: null, paramLower: null, paramUpper: null, paramUnit: null, standard: null, isNecessary: '1', isCheck: '0', remark: null, createBy: null, createTime: null, updateBy: null, updateTime: null }
export default {
  name: 'CraftParamDetail',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['whether','params_type','is_disable'],
  cruds() {
    return CRUD({
      title: '工艺参数详情',
      url: 'api/craftParamDetail',
      idField: 'id',
      sort: 'id,desc',
      optShow: {
        add: true,
        edit: true,
        del: true,
        download: false,
        reset: true,
        import: true
      },
      queryOnPresenterCreated: false,
      crudMethod: { ...crudCraftParamDetail }}
      )
  },
  data() {
    return {
      paramsId : 0,
      params:{},
      operations:[],
      permission: {
        add: ['admin', 'craftParamDetail:add'],
        edit: ['admin', 'craftParamDetail:edit'],
        del: ['admin', 'craftParamDetail:del']
      },
      rules: {
        operationCode: [
          {required: true, message: '工序编码不能为空', trigger: 'blur'}
        ],
        paramCode: [
          {required: true, message: '参数编码不能为空', trigger: 'blur'}
        ],
        paramName: [
          {required: true, message: '参数名称不能为空', trigger: 'blur'}
        ],
        paramLower: [
          {required: true, message: '参数下限不能为空', trigger: 'blur'}
        ],
        paramUpper: [
          {required: true, message: '参数上限不能为空', trigger: 'blur'}
        ],
        paramUnit: [
          {required: true, message: '参数单位不能为空', trigger: 'blur'}
        ],
        standard: [
          {required: false, message: '标准值不能为空', trigger: 'blur'}
        ],
        isNecessary: [
          {required: true, message: '是否必传不能为空', trigger: 'blur'}
        ],
        isCheck: [
          {required: true, message: '是否二次校验不能为空', trigger: 'blur'}
        ]
      },
      queryTypeOptions: [
        { key: 'id', display_name: 'ID' },
        { key: 'paramsId', display_name: '参数集合ID' },
        { key: 'operationCode', display_name: '工序编码' },
        { key: 'paramCode', display_name: '参数编码' },
        { key: 'paramName', display_name: '参数名称' },
        { key: 'paramLower', display_name: '参数下限' },
        { key: 'paramUpper', display_name: '参数上限' },
        { key: 'paramUnit', display_name: '参数单位' },
        { key: 'standard', display_name: '标准值' },
        { key: 'isNecessary', display_name: '是否必传' },
        { key: 'isCheck', display_name: '是否二次校验' },
        { key: 'remark', display_name: '描述' },
        { key: 'createBy', display_name: '创建人' },
        { key: 'updateBy', display_name: '更新人' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.params.paramsId = this.paramsId;
      return true
    },
    //新增之前
    [CRUD.HOOK.beforeToAdd](crud) {
      crud.form.paramsId = this.paramsId;
      return true
    },
    //加载页面
    queryPage(id){
      this.paramsId = id;
      this.crud.toQuery();
    },
    //初始化数据
    async initData(){

      //获取参数集数据
      await crudCraftParam.getById(this.paramsId).then(res =>{
        if(res){
         this.params = res;
        }
      });

      //获取工序数据
      await crudCraftOperationProduct.getByProduct({productCode:this.params.productCode}).then(res =>{
        if(res){
          this.operations = res;
        }
      })
    },
    getOperationName(operationCode){
      let name = '';
      this.operations.forEach(item =>{
        if(operationCode == item.operationCode){
          name = item.operationName;
          return;
        }
      });
      return name;
    }
  },
  mounted() {
    const id = this.$route.params.id;
    this.queryPage(id);
    this.initData();
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .user-info {
      padding-left: 0;
      list-style: none;
    li{
      border-bottom: 1px solid #F0F3F4;
      padding: 16px 0;
      font-size: 13px;
    }
    .user-right {
      float: right;
    a{
      color: #317EF3;
    }
   }
  }

  .badge-content {
    background-color: #e6a23c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 20px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
    width: 40px;
  }

</style>
